<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>账号设置-修改密码 - EasyBlog博客</title>
    <th:block th:replace="~{ fragment/common::common_head}" />
</head>
<body>

<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>


<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <div class="one wide column"></div>
        <!--左侧菜单栏-->
        <div th:replace="~{ fragment/account-setting-sidebar::sidebar}"></div>
        <!--博客内容-->
        <div class="twelve wide column">
            <form  class="ui form top attached segment stackable">
                <h3   class="m-margin-top m-margin-bottom m-margin-left"
                    style="font-size: 20px !important;color: #3d3d3d !important;">
                    修改密码</h3>
                <div class="ui divider"></div>
                <div class="m-margin-left-large " style="padding-top: 3em !important;">
                    <div class="ui fluid input" style="width: 50% !important;">
                        <span class="m-margin-top">输入旧密码：</span>
                        <input id="oldpwd" name="oldPWD" type="password" placeholder="请输入旧密码"/>
                    </div>
                    <br/>
                    <div class="ui fluid input m-mobile-wide-pwdBar" style="width: 50% !important;">
                        <span class="m-margin-top">输入新密码：</span>
                        <input id="newpwd" name="newPWD" type="password" placeholder="11-20位数字和字母组合"/>
                    </div>
                    <br/>
                    <div class="ui fluid input m-mobile-wide-pwdBar" style="width: 50% !important;">
                        <span class="m-margin-top">确认新密码：</span>
                        <input id="newpwdconfirm" name="newPWDConfirm" type="password" placeholder="请确认新密码"/>
                    </div>
                    <br/>
                    <button type="button" id="firm_btn"  class="ui red medium disabled button m-margin-left-middle">
                        确认
                    </button>
                </div>
                <div style="padding-bottom: 12em !important;"></div>
            </form>
        </div>
    </div>
</div>
<div  class="ui small modal">
    <div class="header" id="msg_header">删除</div>
    <div id="msg" class="content">
    </div>
    <div class="actions">
        <div id="msg-btn" class="ui red button">知道了</div>
    </div>
</div>

<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        let userId=$('#userId').val();
        showPageZoomWarning();
        toggleStatus();
        logOut();
    });
</script>
<script th:online="javascript">
    $('#msg-btn').click(function () {
        $('.ui.modal').modal('hide');
    });
    $('#firm_btn').click(function () {
        $('#firm_btn').addClass("disabled");
        let userId="[[${user.getUserId()}]]";
        var oldPWD=$('#oldpwd').val();
        var newPWD=$('#newpwd').val();
        var newPWDConfirm=$('#newpwdconfirm').val();
        $.ajax({
            url:"/manage/account/reset/password/save",
            method:"GET",
            sync: true,
            data:{oldPwd:oldPWD,newPwd:newPWD,newPwdConfirm:newPWDConfirm,userId:userId},
            dateType: "json",
            success:function (response) {
                if(response.success){
                    logOut(userId);
                }else{
                    showErrorMessage(response.message);
                }
            },
            error:function () {
                showErrorMessage("服务异常，请重试！");
            }
        })
    })
</script>
<script>
    $('#account1').css("background",'#ca0c16');
    $('#account1').css('color','#ffffff')
</script>
<!--控制按钮的禁用和可用状态-->
<script type="text/javascript">
    $(function () {
        function changePwd() {
            var len1=document.getElementById("oldpwd").value.length;
            var len2=document.getElementById("newpwd").value.length;
            var len3=document.getElementById("newpwdconfirm").value.length;
            if(len1!=0&&len2!=0&&len3!=0){
                $('#firm_btn').removeClass("disabled");
            }else{
                $('#firm_btn').addClass("disabled");
            }
        }
        setInterval(changePwd, 300);
    });

</script>

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    $('#searchBar').click(function () {
        $('#reloadSearchBar').css("display", "block");  //显示div
    })
</script>
</html>